﻿@model FairyWorld.Models.Fold

@{
    ViewBag.Title = "Image";
    Layout = "~/Views/Shared/GroupLayout.cshtml";
}

<script src="@Url.Content("~/Scripts/jquery.magnific-popup.js")" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        $("#imageli").attr("class", "active");
        $('.image-link').magnificPopup({ type: 'image' });
    })
    function update(message) {
        $.post("/Group/Image", { "op": message },
        function (data) {
            if (message == '0' || state == 0) {
                var str = '<tr>' +
                    '<th class="span1">类型</th>' +
                    '<th class="span2">名称</th>' +
                    '<th class="span2">操作</th>' +
                    '<th class="span1">大小(kb)</th>' +
                    '<th class="span1">上传时间</th>' +
                    '<th class="span1">下载次数</th></tr>';
                for (item = 0; item < data.folds.length; ++item) {
                    str += '<tr><td><img src="../../Content/image/icon/folder.png" style="width:30px"/>'
                    + '</td><td><a onclick="update(\'+' + data.folds[item].foldname + '\')">' + data.folds[item].foldname + '</a></td>'
                    if (document.getElementById("power").innerHTML == 2)
                        str += '<td><a onclick=\'deletef("' + data.folds[item].foldname + '", 2)\'>删除</a>'
                    else
                        str += "<td></td>";
                    str += '</td><td></td><td></td><td></td></tr>';
                }
                for (item = 0; item < data.files.length; ++item) {
                    if (data.files[item].tag == 2) {
                        str += '<tr><td><img src="../../Content/image/icon/image.png" style="width:30px"/>'
                            + '</td><td>' + data.files[item].filename + '</td><td>';
                        if (document.getElementById("power").innerHTML == 2 || document.getElementById("user").innerHTML == data.files[item].creator.UserId)
                            str += '<a onclick=\'deletef("'+ data.files[item].filename + '", 2)\'>删除</a>&nbsp;|&nbsp;';
                        str += '<a href="/Group/Download?name=' + data.files[item].filename + '&tag=2">下载</a>&nbsp;|&nbsp;'
                        + '<a href="../' + data.files[item].url + '" class="image-link">预览</a></td>';
                        str += '<td>' + (data.files[item].size / 1024.0).toFixed(2) + '</td>'
                             + '<td>' + data.files[item].createTime + '</td>'
                             + '<td>' + data.files[item].hot + '</td>';
                        //        if (data.files[item].creator != null) {
                        //            str += '<div>' + data.files[item].creator.username + '</div>';
                        //        }
                    }
                }
                $("#content0").html(str);
                //        document.getElementById("content0").innerHTML = str;
            } else if (message == '1' || state == 1) {
                var str = "";
                for (item = 0; item < data.folds.length; ++item) {
                    str += '<li style="width:120px">' +
                   '<div onmouseover="showdesc(this)" onmouseout="hidedesc(this)" >' +
                        '<a href="#" class="thumbnail" onclick="update(\'+' + data.folds[item].foldname + '\')">' +
                            '<img src="../Content/image/icon/folder.png" data-src="holder.js/" style="height:90px"  alt ="" /></a>' +
                            '<div class="foldname" style="padding:5px 0px 0px 10px; width:100px; overflow:hidden"><small>' + data.folds[item].foldname + '</small></div>' +
                        '<div class="desc" style="visibility:hidden; padding:5px 0px 0px 10px">&nbsp;';
                    if (document.getElementById("power").innerHTML == 2)
                    {
                        str += '<a onclick=\'deletef("' +data.folds[item].foldname + '", 2)\'>';
                        str += '<i class="icon-trash icon-white"></i></a>'
                    }
                    str += '</div></d</li>'
                }
                for (item = 0; item < data.files.length; ++item) {
                    if (data.files[item].tag == 2) {
                        var thumburl = "../Content/files/thumbnail/" + data.files[item].MyFileId + "_" + data.files[item].filename;
                        str += '<li style="width:120px"><div onmouseover="showdesc(this)" onmouseout="hidedesc(this)" >' +
                                '<a href="../' + data.files[item].url + '" class="thumbnail image-link">' +
                            '<img src="' + thumburl + '" data-src="holder.js/300x200" style="height:90px" alt =""/></a>' +
                        '<div class="desc" style="visibility:hidden; padding:5px 0px 0px 10px">';
                        if (document.getElementById("power").innerHTML == 2 || document.getElementById("user").innerHTML == data.files[item].creator.UserId)
                            str += '<a onclick=\'deletef("' + data.files[item].filename + '", 2)\'><i class="icon-trash icon-white"></i></a>';
                        str+= '<a href="/Group/Download?name=' + data.files[item].filename + '&tag=2">&nbsp;&nbsp;<i class="icon-download icon-white"></i></a>' +
                        '</div></div></li>'
                    }
                }
                $("#content1").html(str);
                //    document.getElementById("content1").innerHTML = str;
            }
        });
        $.post("/Group/Nothing", {}, function () {
            $('.image-link').magnificPopup({ type: 'image' });
        });
    }
    function changestate(s) {
        state = s;
        $("#state" + s).css("display", "block");
        $("#state" + (1 - s)).css("display", "none");
        $("#btn" + s).attr("class", "btn active");
        $("#btn" + (1 - s)).attr("class", "btn");
        update("" + s);
    }
    function showdesc(obj) {
        $(obj).children(".desc").css("visibility", "visible");
    }
    function hidedesc(obj) {
        $(obj).children(".desc").css("visibility", "hidden");
    }
</script>

<style type="text/css">
        .textstyle1
        {
            color: Red;
            font-weight: bold;
        }
        .textstyle2
        {
            color: Green;
            font-weight: bold;
        }
        .desc { 
            background: #111; 
            filter:alpha(opacity=75); 
            opacity:.75; 
            color: #fff; 
            margin-top: -25px;
           z-index:2;
        }
        .foldname
        {
            background: #fff; 
            color: #000; 
            margin-top: -27px;
            margin-left:3px;
            text-align:center;
            z-index:1;
        }
	    .wrapper{ 
	    width:930px; 
	    background-color:#fff; 
	    position:relative;	    
	    box-shadow:1px 1px 4px rgba(0,0,0,0.4); 
	    -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.4);
        -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.4);
        padding:20px;
	    }
 </style>

<h3>图片</h3>
<div class="wrapper">
<div class="btn-group" style="padding-bottom:15px; text-align:right; width:930px">
    <a class="btn active" id="btn0" href="#" onclick="changestate(0)"><i class="icon-align-justify"></i></a>
    <a class="btn" id="btn1" href="#" onclick="changestate(1)"><i class="icon-th"></i></a>
</div>
<div id="state0">
    <table id="content0" class="table table-hover" style="font-family:'Arial Rounded MT', 'Microsoft YaHei'">
        <tr >
            <th class="span1">类型</th>
            <th class="span2">名称</th>
            <th class="span2">操作</th>
            <th class="span1">大小(kb)</th>
            <th class="span1">上传时间</th>
            <th class="span1">下载次数</th>
        </tr>
        @foreach (var items in Model.folds)
        {
            <tr>
                <td>
                    <img src="../../Content/image/icon/folder.png" style="width:30px"/>
                </td>
                <td>
                    <a onclick="update('+@items.foldname')">@items.foldname</a>
                </td>
                <td>
                    @if (ViewBag.Power == 2)
                    {
                        <a onclick='deletef("@items.foldname", 2)'>删除</a>
                    }
                </td>
                <td></td><td></td><td></td>
            </tr>
        }
        @foreach (var items in Model.files)
        {
            if (items.tag == 2)
            {
                <tr>
                    <td>
                        <img src="../../Content/image/icon/image.png" style="width:30px"/>
                    </td>
                    <td>
                        @items.filename
                    </td>
                    <td>
                        @if (ViewBag.Power == 2 || ViewBag.User.UserId == items.creator.UserId)
                        {
                            <a onclick='deletef("@items.filename", 2)'>删除</a><span>&nbsp;|</span>
                        }
                         @Html.ActionLink("下载", "Download", new { name = items.filename, tag = 2 })
                        |&nbsp;<a href="../@items.url" class="image-link">预览</a>
                    </td>
                        <td>@{var fsize = items.size / 1024.0; fsize = Math.Round(fsize, 2);} @fsize</td>
                        <td>@items.createTime</td>
                        <td>@items.hot</td>
      <!--                  @if (items.creator != null)
                            {
                            <div>@items.creator.username</div>
                            }-->
  
                </tr>
            }
        }
    </table>
</div>
<div id="state1" style="display:none">
    <ul class="thumbnails" id = "content1">
        @foreach (var items in Model.folds)
        {
               <li style="width:120px">
                   <div onmouseover="showdesc(this)" onmouseout="hidedesc(this)" >
                        <a href="#" class="thumbnail" onclick="update('+@items.foldname')">
                            <img src="../Content/image/icon/folder.png" data-src="holder.js/" style="height:90px"  alt ="" />  
                        </a>
                        <div class="desc" style="visibility:hidden; padding:5px 0px 0px 10px">
                                @items.foldname
                            @if (ViewBag.Power == 2)
                            {
                                <a onclick='deletef("@items.foldname", 2)'>
                                    <i class="icon-trash icon-white" style="float:right"></i></a>
                            }
                        </div>
                    </div>
                </li>
        }
        @foreach (var items in Model.files)
        {
            if (items.tag == 2)
            {
                var thumburl = "../Content/files/thumbnail/" + items.MyFileId + "_" + items.filename;
                <li style="width:120px">
                    <div onmouseover="showdesc(this)" onmouseout="hidedesc(this)" >
                        <a href="../@items.url" class="thumbnail image-link">
                            <img src="@thumburl" data-src="holder.js/300x200" style="height:90px" alt =""/>  
                        </a>
                        <div class="desc" style="visibility:hidden; padding:5px 0px 0px 10px">
                            @if (ViewBag.Power == 2 || ViewBag.User.UserId == items.creator.UserId)
                            {
                                <a onclick='deletef("@items.filename", 2)'><i class="icon-trash icon-white"></i></a>
                            }
                            <a href="/Group/Download?name=035.JPG&tag=2">&nbsp;&nbsp;<i class="icon-download icon-white"></i></a>
                        </div>
                    </div>  
                </li>
            }
        }
    </ul> 
</div>
<a onclick="update('-')">上一层</a>
@if (ViewBag.Power > 0)
{
    <div class="input-append" style="margin-top:10px">
        <input name="fold" id="newfold" type="text" placeholder="文件夹名"/>
        <input type="button" class="btn" onclick="addfolder()" value="新建文件夹"/>
        <input type="hidden" name="tag" id="tag" value="2" />
    </div>    
   <div>
    <p>添加文件：</p>
        <p><input id="fileInput1" name="fileInput1" type="file"/></p>
        <p style="margin-top:5px;font-size:14px;font-weight:bold;">
        <a href="javascript:if(checkImport()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">导入文件</a></p>
        <p style="margin-top:5px;font-size:14px;font-weight:bold;"><span id="result"></span></p>
    </div>
}
<div style="visibility:hidden" id="power">@ViewBag.Power</div>
<div style="visibility:hidden" id="user">@ViewBag.User.UserId</div>

</div>